<!--
 * @Author: N0ts
 * @Date: 2021-11-16 16:59:53
 * @LastEditTime: 2023-05-19 16:26:39
 * @Description: NutssssIndex2
 * @FilePath: /NutssssIndex2/index.html
 * @Mail：mail@n0ts.top
-->

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>标题</title>
        <meta name="description" content="关键字" />
        <meta name="keywords" content="关键词" />
        <link rel="icon" href="./favicon.ico" />
        <link href="https://cdn.bootcdn.net/ajax/libs/viewerjs/1.10.1/viewer.min.css" rel="stylesheet" />
        <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <link rel="stylesheet" href="./css/N0ts.css" />
    </head>

    <body>
        <div id="app">
            <div class="load">
                <p>加载中...</p>
                <div class="loadLove">
                    <div class="loadLeft"></div>
                    <div class="loadRight"></div>
                </div>
            </div>

            <div class="Box">
                <!-- ALL -->
                <div id="Indexbox">
                    <!-- 遮罩层 -->
                    <div
                        :class="{ blackWindow: true, blackWindowShow: tabState || menuTabState || pagesTabState }"
                        @click="closeBlackWindow"
                    ></div>

                    <!-- 顶部菜单 -->
                    <div class="menu">
                        <img src="./favicon.ico" alt="favicon" />
                        <ul class="menuUL">
                            <li>
                                <a href="https://n0ts.top/" target="_blank">首页(L)</a>
                            </li>
                            <li>
                                <a href="https://blog.n0ts.top/me" target="_blank">关于我(O)</a>
                            </li>
                            <li>
                                <a href="https://blog.n0ts.top/category/mywork" target="_blank">我的垃圾项目(V)</a>
                            </li>
                            <li>
                                <a href="https://lovexhj.top/" target="_blank">我的爱人(E)</a>
                            </li>
                            <li>
                                <a href="https://note.n0ts.top/" target="_blank">笔记(X)</a>
                            </li>
                            <li>
                                <a href="https://blog.n0ts.top/" target="_blank">博客(H)</a>
                            </li>
                            <li>
                                <a href="https://blog.n0ts.top/msg" target="_blank">留言(J)</a>
                            </li>
                        </ul>
                        <!-- 标题 -->
                        <p>N0ts - 咸鱼一只</p>
                    </div>

                    <!-- 左侧菜单按钮 -->
                    <div class="leftBar">
                        <div class="leftBarButtomMe" @click="changeTab"></div>
                        <div class="leftBarButtomMenu" @click="changeMenuTab">
                            <div class="div1"></div>
                            <div class="div2"></div>
                            <div class="div3"></div>
                        </div>
                        <div class="leftBarButtomPages" @click="changePagesTab"></div>
                    </div>

                    <!-- 左侧拉出菜单 我 -->
                    <div :class="{ leftBarMe: true, leftBarMeClick: tabState }">
                        <div class="leftBarButtomClose" @click="closeBlackWindow">
                            <div class="div1"></div>
                            <div class="div2"></div>
                        </div>
                        <div class="img">
                            <img src="https://q1.qlogo.cn/g?b=qq&nk=1656071287&s=640" alt="N0ts" />
                        </div>
                        <div class="introduction">
                            <h1>N0ts</h1>
                            <p>大专的咸鱼，爱好计算机、旅行、篮球，以及我公主般的女朋友。</p>
                        </div>
                        <div class="icon">
                            <ul>
                                <li>
                                    <a
                                        href="https://wpa.qq.com/msgrd?v=3&uin=1656071287&site=qq&menu=yes"
                                        target="_blank"
                                        ><i class="fa fa-qq" aria-hidden="true"></i
                                    ></a>
                                </li>
                                <li>
                                    <a href="https://gitee.com/nutssss" target="_blank"
                                        ><i class="fa fa-github fa-lg" aria-hidden="true"></i
                                    ></a>
                                </li>
                                <li>
                                    <a href="https://blog.n0ts.top/" target="_blank"
                                        ><i class="fa fa-wordpress" aria-hidden="true"></i
                                    ></a>
                                </li>
                            </ul>
                        </div>
                        <div class="connect">
                            <a href="https://blog.n0ts.top/me" target="_blank">关于</a>
                            <a href="https://blog.n0ts.top/msg" target="_blank">留言</a>
                        </div>
                    </div>

                    <!-- 左侧拉出菜单 顶部菜单 -->
                    <div :class="{ leftBarTitleMenu: true, leftBarTitleMenuClick: menuTabState }">
                        <div class="leftBarButtomClose" @click="closeBlackWindow">
                            <div class="div1"></div>
                            <div class="div2"></div>
                        </div>
                        <h1>导航</h1>
                        <ul>
                            <li>
                                <a href="https://n0ts.top/" target="_blank" @click="changeMenuTab">首页</a>
                            </li>
                            <li>
                                <a href="https://blog.n0ts.top/me" target="_blank" @click="changeMenuTab">关于我</a>
                            </li>
                            <li>
                                <a href="https://blog.n0ts.top/category/mywork" target="_blank" @click="changeMenuTab"
                                    >我的垃圾项目</a
                                >
                            </li>
                            <li>
                                <a href="https://love.n0ts.top/" target="_blank" @click="changeMenuTab">我的爱人</a>
                            </li>
                            <li>
                                <a href="https://note.n0ts.top/" target="_blank" @click="changeMenuTab">笔记</a>
                            </li>
                            <li>
                                <a href="https://blog.n0ts.top/" target="_blank" @click="changeMenuTab">博客</a>
                            </li>
                            <li>
                                <a href="https://blog.n0ts.top/msg" target="_blank" @click="changeMenuTab">留言</a>
                            </li>
                        </ul>
                    </div>

                    <!-- 左侧拉出菜单 页面 -->
                    <div :class="{ leftBarPages: true, leftBarPagesClick: pagesTabState }">
                        <div class="leftBarButtomClose" @click="closeBlackWindow">
                            <div class="div1"></div>
                            <div class="div2"></div>
                        </div>
                        <div class="leftBarPagesBox">
                            <h1>页面</h1>
                            <div class="leftBarPagesOptine" @click="changePageIndex(0)">
                                <img
                                    src="./images/stuck_out_tongue.png"
                                    alt="stuck_out_tongue"
                                />
                                <p>hello world.md</p>
                            </div>
                            <div class="leftBarPagesOptine" @click="changePageIndex(1)">
                                <img
                                    src="./images/stuck_out_tongue_closed_eyes.png"
                                    alt="stuck_out_tongue_closed_eyes"
                                />
                                <p>Gitee Project.md</p>
                            </div>
                            <div class="leftBarPagesOptine" @click="changePageIndex(2)">
                                <img
                                    src="./images/stuck_out_tongue_winking_eye.png"
                                    alt="stuck_out_tongue_winking_eye"
                                />
                                <p>404.md</p>
                            </div>
                            <div class="leftBarPagesOptine" @click="changePageIndex(3)">
                                <img src="./images/icecream.png" alt="icecream" />
                                <p>My Life.md</p>
                            </div>
                        </div>
                    </div>

                    <!-- 页面版块1 -->
                    <div class="pages" id="pages">
                        <!-- 页面选项卡 -->
                        <div class="pagesTitle">
                            <div
                                :class="{ pagesTitleOption: true, pagesTitleOptionClick: pageIndex == 0 }"
                                id="pagesTitleOption1"
                                @click="changePageIndex(0)"
                            >
                                <img
                                    src="./images/stuck_out_tongue.png"
                                    alt="stuck_out_tongue"
                                />
                                <p>Hello World.md</p>
                            </div>
                            <div
                                :class="{ pagesTitleOption: true, pagesTitleOptionClick: pageIndex == 1 }"
                                @click="changePageIndex(1)"
                            >
                                <img
                                    src="./images/stuck_out_tongue_closed_eyes.png"
                                    alt="stuck_out_tongue_closed_eyes"
                                />
                                <p>My Project.md</p>
                            </div>
                            <div
                                :class="{ pagesTitleOption: true, pagesTitleOptionClick: pageIndex == 2 }"
                                @click="changePageIndex(2)"
                            >
                                <img
                                    src="./images/stuck_out_tongue_winking_eye.png"
                                    alt="stuck_out_tongue_winking_eye"
                                />
                                <p>404.md</p>
                            </div>
                            <div
                                :class="{ pagesTitleOption: true, pagesTitleOptionClick: pageIndex == 3 }"
                                id="pagesTitle2"
                                @click="changePageIndex(3)"
                            >
                                <img src="./images/icecream.png" alt="icecream" />
                                <p>My Life.md</p>
                            </div>
                        </div>

                        <!-- 页面 -->
                        <div :class="{ pagesText: true, pagesTextShow: pageIndex == 0 }">
                            <div class="pagesTextBox">
                                <h1>你好，我是N0ts<br />热爱编程，旅游，运动。</h1>
                                <div class="pagesTextBoxImg">
                                    <img
                                        src="./images/lovexhj.jpg"
                                        alt="lovexhj"
                                        class="n0tsImg"
                                    />
                                    <h6>❤我的小公主写的</h6>
                                </div>
                                <p>小时候总是不爱去旅行，但现在却相反；</p>
                                <p>很喜欢去外面旅行，欣赏风景。</p>
                                <div class="pagesTextBoxImg">
                                    <img
                                        src="./images/me1.jpg"
                                        alt="me1"
                                        class="n0tsImg"
                                    />
                                    <h6>旅游被弟弟抓拍</h6>
                                </div>
                                <p>用照片记录下某一瞬间的美景，让开心的时刻得以永久保存。</p>
                                <p>也算是爱好摄影，想给自己留下一个个美好回忆。</p>
                                <div class="pagesTextBoxImg">
                                    <img
                                        src="./images/fj1.jpg"
                                        alt="fj1"
                                        class="n0tsImg"
                                    />
                                    <h6>某次旅游途中随手抓拍</h6>
                                </div>
                                <p>当然，我也很爱打篮球。</p>
                                <p>技术不是很好，但是很热爱，</p>
                                <p>一个篮球，一群朋友。</p>
                                <div class="pagesTextBoxImg">
                                    <img
                                        src="./images/me2.jpg"
                                        alt="me2"
                                        class="n0tsImg"
                                    />
                                    <h6>起飞！</h6>
                                </div>
                                <p>成绩不好的我只能放手一搏</p>
                                <p>以兴趣作为核心，继续向前奔跑</p>
                                <p>即使前方的路看似绝境，也要有硬生生给自己开出一条路的勇气</p>
                                <div class="pagesTextBoxImg">
                                    <img
                                        src="./images/index1.png"
                                        alt="index1"
                                        class="n0tsImg"
                                    />
                                    <h6>这个垃圾主页</h6>
                                </div>
                            </div>
                        </div>
                        <div :class="{ pagesText: true, pagesTextShow: pageIndex == 1 }">
                            <div class="pagesTextBox">
                                <h1>我的开源垃圾</h1>
                                <ul class="giteeBoxUL" v-if="giteeData">
                                    <li v-for="(item, index) in giteeData" :key="index">
                                        <div class="giteeBoxTitle">
                                            <a target="_blank" :href="item.owner.html_url" style="color: rgb(110, 110, 110)">{{ item.namespace.name }}</a>
                                            /
                                            <a target="_blank" :href="'https://gitee.com/' + item.full_name">{{ item.name }}</a>
                                            <div class="starBox">
                                                <i class="fa fa-star" aria-hidden="true"></i>
                                                <span class="star">0</span>
                                            </div>
                                        </div>
                                        <p class="giteeBoxText">{{ item.description }}</p>
                                        <p class="giteeBoxTime">最后更新：{{ new Date(item.pushed_at).toLocaleDateString() }}</p>
                                        <a target="_blank" :href="'https://gitee.com/' + item.full_name" class="aClick show">查看</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div :class="{ pagesText: true, pagesTextShow: pageIndex == 2 }">
                            <div class="pagesTextBox">
                                <h1>暂无</h1>
                                <p>没想好放点什么</p>
                            </div>
                        </div>
                        <div :class="{ pagesText: true, pagesTextShow: pageIndex == 3 }">
                            <div class="pagesTextBox">
                                <h1>我与她</h1>
                                <p>2018-11-19</p>
                                <p>故事开始</p>
                                <div class="pagesTextBoxImg">
                                    <img
                                        src="./images/love1.jpg"
                                        alt="love1"
                                        class="n0tsImg"
                                    />
                                    <h6>我们的第一张合影</h6>
                                </div>
                                <p>截止现在</p>
                                <p>{{ timeText }}</p>
                                <p>有你的每一天都如糖果一样甜</p>
                                <div class="pagesTextBoxImg">
                                    <img
                                        src="./images/love2.jpg"
                                        alt="love2"
                                        class="n0tsImg"
                                    />
                                    <h6>看电影日常</h6>
                                </div>
                                <a href="https://love.n0ts.top" class="aClick" target="_blank">More?</a>
                            </div>
                        </div>
                    </div>

                    <!-- 页面版块2 -->
                    <div class="pages pages2">
                        <!-- 页面选项卡 -->
                        <div class="pagesTitle">
                            <div class="pagesTitleOption pagesTitleOption-click">
                                <img src="./images/icecream.png" alt="icecream" />
                                <p>My Life.md</p>
                            </div>
                        </div>

                        <!-- 页面 -->
                        <div class="pagesText pagesTextShow">
                            <div class="pagesTextBox pagesTextBox2">
                                <h1>我与她</h1>
                                <p>2018-11-19</p>
                                <p>故事开始</p>
                                <div class="pagesTextBoxImg">
                                    <img
                                        src="./images/love1.jpg"
                                        alt="love1"
                                        class="n0tsImg"
                                    />
                                    <h6>我们的第一张合影</h6>
                                </div>
                                <p>截止现在</p>
                                <p>{{ timeText }}</p>
                                <p>有你的每一天都如糖果一样甜</p>
                                <div class="pagesTextBoxImg">
                                    <img
                                        src="./images/love2.jpg"
                                        alt="love2"
                                        class="n0tsImg"
                                    />
                                    <h6>看电影日常</h6>
                                </div>
                                <a href="https://love.n0ts.top" class="aClick" target="_blank">More?</a>
                            </div>
                        </div>
                    </div>

                    <!-- 底部版权 -->
                    <div class="footer">
                        <p class="left">&copy; 2021 N0ts | THEME MADE BY <a href="https://n0ts.top">N0ts</a></p>
                        <!-- <p class="right"><a href="http://beian.miit.gov.cn">湘ICP备20005603号-2</a></p> -->
                    </div>
                </div>
            </div>
        </div>

        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/viewerjs/1.10.1/viewer.min.js"></script>
        <script src="./js/N0ts.js" type="module"></script>
    </body>
</html>
